<template>
  <!-- home 样式 -->
  <el-container class="home">
    <!-- 左侧 -->
    <el-aside width="auto">
      <hf-nav-side v-model:collapse="collapse">
        <!-- 自定义菜单 -->
        <template #default>
          <!-- defaultActive 无效 -->
          <hf-menu :defaultActive="active" :collapse="collapse" />
        </template>
      </hf-nav-side>
    </el-aside>
    <el-container>
      <el-header height="auto">
        <!-- 主显示区->上 -->
        <hf-nav-header />
      </el-header>
      <el-main>
        <!-- 主显示区域 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
let collapse = ref<boolean>(false)
let active = ref('/second/icons')
</script>

<style scoped lang="scss"></style>
